<template>
	<view class="mine-voucher-present">
		<view class="top-content">
			<view class="credit-title">抢购分</view>
			<view class="credit">{{ reputation }}</view>
		</view>
		<view class="add-content-input">
			<view class="input-title">用户ID</view>
			<input class="input-style" type="number" placeholder-class="input-placeholder" placeholder="对方ID账号"
				maxlength="6" v-model="ID" :focus="IDFocus" @blur="IDLostFocus"></input>
		</view>
		<!-- <view class="add-content-input">
			<view class="input-title">手机号</view>
			<input class="input-style" type="number" placeholder-class="input-placeholder" placeholder="对方手机号"
				maxlength="11" v-model="mobile" :focus="mobileFocus" @blur="mobileLostFocus"></input>
		</view>
		<view class="check-name">
			<view class="name">{{ userName }}</view>
			<view class="check-button" @click="checkUser">查找</view>
		</view> -->
		<view class="add-content-input-two">
			<view class="input-title">转出数量</view>
			<view class="input-content">
				<!-- <view class="price-symbol"></view> -->
				<image class="image" src="/static/images/common/voucher.png"></image>
				<input class="input-style-two" type="number" placeholder-class="input-placeholder" placeholder="请输入转赠数量"
					v-model="number" :focus="numberFocus" @blur="numberLostFocus"></input>
			</view>
		</view>
		<view class="add-button" @click="confirmPresent">确定转赠</view>
		<!-- 弹窗 -->
		<view class="mask" v-if="showTips" @touchmove.stop.prevent>
			<u-transition :show="showTips">
				<view class="modal-bg-box">
					<view class="title">提示</view>
					<view class="inner-box">
						<view class="text-tips" :selectable="false">{{ maskTips }}</view>
						<view class="button-box">
							<view class="button-two" @click="confirm">确定</view>
						</view>
					</view>
				</view>
			</u-transition>
		</view>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import {
		reward,
		// billLad_log,
		// billLad_rotation,
		getUserName,
		BalanceTransfer
	} from '@/common/api.js';
	export default {
		data() {
			return {
				/* 提货券详情滚动 */
				old: {
					scrollTop: 0
				}, // 账单详情滚动设置

				/* 加载更多 */
				loading: {
					status: 'loadmore', // 加载更多设置
					loadingText: '加载中',
					loadmoreText: '轻轻上拉加载更多',
					nomoreText: '暂时没有了',
				}, // 加载设置

				/* 提货券转赠 */
				mobile: '', // 收货人手机号
				mobileFocus: false, // 手机号状态
				number: '', // 数量手机号
				numberFocus: false, // 数量状态
				reputation: '0', // 账户抢购分
				userName: '', // 账户名称
				isCheckName: 0, // 是否检查过用户
				ID: '', // 用户ID
				IDFocus: false, // 手机号状态

				/* 弹窗 */
				maskTips: '转赠成功', // 弹窗提示
				showTips: false, // 弹窗状态
			};
		},
		onLoad() {
			/* 获取账单明细 */
			this.getDetail(); // 获取账单列表
		},
		onShow() {

		},
		methods: {

			/* 确定转赠 */
			confirmPresent() {
				const that = this;
				// if (that.mobile === '') {
				// 	Fn.Toast('手机号不能为空', 3, 1500);
				// 	that.mobileFocus = true;
				// 	return;
				// };
				if (that.number === '') {
					Fn.Toast('转出数量不能为空', 3, 1500);
					that.numberFocus = true;
					return;
				};
				if (that.number <= 0) {
					Fn.Toast('转出数量不能少于0', 3, 1500);
					this.number = '';
					this.numberFocus = true;
					return;
				};
				if (parseFloat(that.number) > parseFloat(that.reputation)) {
					Fn.Toast('可转赠抢购分不足，请重新输入', 3, 1500);
					// this.number = '';
					this.numberFocus = true;
					return;
				};
				// if (that.userName === '') {
				// 	Fn.Toast('请先确认用户是否存在', 3, 1500);
				// 	return;
				// };
				// if (that.isCheckName === 0) {
				// 	Fn.Toast('请重新确认转赠用户信息', 3, 1500);
				// 	that.mobileFocus = true;
				// 	return;
				// } else {
				const params = {
					bzs_userId: that.ID,
					num: that.number
				};
				BalanceTransfer(params).then((res) => {
					if (res.status === 1) {
						const result = res;
						that.showTips = true;
					} else {
						Fn.Toast(res.msg, 3, 1500);
					}
				});
				// };
			},

			/* 账单明细 */
			getDetail() {
				const that = this;
				that.pages = 1;
				const params = {
					page: that.pages,
					limit: that.amount
				};
				reward(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						that.reputation = Fn.checkDigit({
							number: result.drawMoney,
							len: 4,
							max: 100000000,
							min: -1
						})
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 输入用户手机号-获取昵称 */
			checkUser() {
				const that = this;
				if (that.mobile === '') {
					Fn.Toast('请输入转赠手机号', 3, 1500);
					that.mobileFocus = true;
					return;
				};
				const params = {
					phone: that.mobile
				};
				getUserName(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						if (result == null) {
							that.userName = '未能查询到此用户';
							that.isCheckName = 0;
						} else {
							that.userName = '用户名:  ' + result;
							that.isCheckName = 1;
						};
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 手机号失去焦点时 */
			mobileLostFocus(event) {
				this.mobileFocus = false;
				// if (this.mobile === '') {
				// 	this.mobile = '';
				// } else {
				// 	this.checkUser();
				// };
			},

			/* ID输入框失去焦点时 */
			IDLostFocus(event) {
				this.IDFocus = false;
				// if (this.mobile === '') {
				// 	this.mobile = '';
				// } else {
				// 	this.checkUser();
				// };
			},

			/* 数量失去焦点时 */
			numberLostFocus(event) {
				this.numberFocus = false;
			},

			/* 确认 */
			confirm() {
				this.showTips = false;
				this.mobile = '';
				this.number = '';
				this.userName = '';
				Fn.Loading('加载中');
				setTimeout(() => {
					Fn.LoadingOff();
					this.getDetail();
				}, 800);
			},
		}
	}
</script>

<style lang="scss">
	.mine-voucher-present {
		padding: 15px 18px 0 18px;

		.mask {
			position: fixed;
			z-index: 1001;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);

			.modal-bg-box {
				background-color: #FFFFFF;
				width: 580rpx;
				// height: 390rpx;
				position: absolute;
				left: 50%;
				top: 45%;
				transform: translate(-50%, -50%);

				.title {
					text-align: center;
					margin: 40rpx 0;
					font-size: 42rpx;
					font-weight: 600;
				}

				.inner-box {
					margin: 20rpx 55rpx 40rpx 55rpx;
					text-align: center;

					.text-tips {
						display: block;
						line-height: 70rpx;
						font-size: 33rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: bold;
						color: #89898C;
						word-wrap: break-word;
					}

					.button-box {
						text-align: center;
						margin-top: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.button-one {
							display: inline-block;
							padding: 0 10px;
							width: 120rpx;
							height: 58rpx;
							line-height: 58rpx;
							margin: 0 40rpx 0 0;
							text-align: center;
							color: #000000;
							border: 2px solid #000000;
							border-radius: 8rpx;
							font-size: 26rpx;
							font-weight: bold;
							cursor: pointer;
						}

						.button-two {
							padding: 0 10px;
							background-color: #000000;
							display: inline-block;
							width: 120rpx;
							height: 58rpx;
							line-height: 58rpx;
							// margin: 0 0 0 40rpx;
							text-align: center;
							color: #FFFFFF;
							border-radius: 8rpx;
							font-size: 26rpx;
							font-weight: bold;
							cursor: pointer;
						}
					}
				}
			}
		}

		.top-content {
			background-color: #FEF4EA;
			padding: 16rpx 40rpx;
			border-radius: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.credit-title {
				font-size: 18px;
				font-weight: 600;
			}

			.credit {
				margin: 20rpx 0 20rpx 0;
				color: #AD4440;
				font-size: 62rpx;
				font-weight: 600;
			}
		}

		.add-content-input {
			padding: 24rpx 22rpx;
			border: 1px solid #E1E1E1;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&:nth-of-type(n+2) {
				margin-top: 30rpx;
			}

			.input-style {
				width: 45vw;
				color: #58585a;
				font-size: 30rpx;
				// font-weight: 600;
				text-align: right;
			}

			.input-placeholder {
				color: #a5a5a8;
				font-size: 30rpx;
				// font-weight: 600;
			}

			.input-title {
				font-size: 32rpx;
				font-weight: 600;
			}
		}

		.add-content-input-two {
			padding: 24rpx 22rpx;
			border: 1px solid #E1E1E1;
			margin-top: 30rpx;

			.input-style {
				width: 45vw;
				color: #58585a;
				font-size: 30rpx;
				// font-weight: 600;
				text-align: right;
			}

			.input-placeholder {
				color: #a5a5a8;
				font-size: 30rpx;
				// font-weight: 600;
			}

			.input-title {
				font-size: 32rpx;
				font-weight: 600;
			}

			.input-content {
				// margin-right: 40rpx;
				display: flex;
				align-items: center;
				margin: 40rpx 0 0 0;

				.price-symbol {
					// font-size: 40rpx;
					// font-weight: 600;
				}

				.image {
					width: 60rpx;
					height: 60rpx;
				}

				.input-style-two {
					color: #58585a;
					font-size: 30rpx;
					margin-left: 30rpx;
				}
			}
		}

		.add-button {
			background-color: #FCEBD9;
			// width: 90vw;
			margin: 5vh auto 0 auto;
			text-align: center;
			line-height: 82rpx;
			font-weight: 600;
			font-size: 34rpx;
			border-radius: 5px;
			cursor: pointer;
		}

		.check-name {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;

			.name {
				// margin-left: 26rpx;
				color: #AD4440;
				font-size: 30rpx;
				font-weight: 600;
			}

			.check-button {
				background-color: #AD4440;
				color: #FFFFFF;
				width: 15vw;
				line-height: 50rpx;
				text-align: center;
				cursor: pointer;
				font-size: 26rpx;
				border-radius: 5px;
			}
		}

		.bottom-content {
			margin: 12vh 0;

			.detail-title {
				font-size: 34rpx;
				font-weight: 600;
			}

			.scroll-style {
				// background-color: #ff7d7d;
				margin: 34rpx 0;
				// background-color: #FFFFFF;
				border-radius: 10px;
				max-height: 70vh;
			}

			.extract-content {
				box-sizing: border-box;
				// background-color: #FFFFFF;
				// border-radius: 10px;
				padding: 16rpx 40rpx;
				// padding-top: 60rpx;


				.line-style {
					margin: 30rpx 0;
					box-sizing: border-box;

					&:nth-of-type(1) {
						margin-top: 0;
					}

					.line-content {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: 30rpx 5px 30rpx 5px;

						.title-date {

							.line-title {
								color: #6B3C17;
								font-size: 30rpx;
							}

							.line-date {
								margin-top: 5px;
								color: #D6C9BF;
								font-size: 24rpx;
							}
						}

						.line-reputation-one {
							color: #AD4440;
							font-size: 36rpx;
							font-weight: 600;
						}

						.line-reputation-two {
							color: #6B3C17;
							font-size: 36rpx;
							font-weight: 600;
						}
					}

					.line {
						background-color: #EEEEEE;
						height: 1px;
					}
				}
			}
		}
	}
</style>
